<template>
    <!-- 员工后台:给老人建档(健康档案) -->
    <el-form :model="files" label-width="180px">
        <el-form-item label="建档用户">
            <el-select v-model="files.older_id" placeholder="请选择老人..." style="width: 480px;">
            <el-option :label="item.username" :value="item.id" v-for="item in olderList" :key="item.id"></el-option>

            </el-select>
        </el-form-item>

        <el-form-item label="手机号">
            <el-form v-model="olderInfo" :inline="true" label-width="180px">
                <el-form-item>
                    <el-input v-model="olderInfo.phone" style="width: 480px;" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="olderInfo.address" style="width: 480px;" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
        </el-form-item>

        <el-form-item label="亲属">
            <el-form v-model="olderInfo" :inline="true" label-width="180px">
                <el-form-item>
                    <el-input v-model="olderInfo.clan" style="width: 480px;" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="亲属电话">
                    <el-input v-model="olderInfo.clan_phone" style="width: 480px;" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
        </el-form-item>

        <el-form-item label="身高(cm)">
            <el-form :inline="true" label-width="180px">
                <el-form-item>
                    <el-input type="number" v-model.number="files.height" style="width: 480px;" placeholder="必填项!"></el-input>
                </el-form-item>
                <el-form-item label="体重(kg)">
                    <el-input type="number" v-model.number="files.weight" style="width: 480px;" placeholder="必填项!"></el-input>
                </el-form-item>
            </el-form>
        </el-form-item>

        <el-form-item label="呼吸频率(次/min)">
            <el-form :inline="true" label-width="180px">
                <el-form-item>
                    <el-input type="number" v-model.number="files.respiratory_rate" style="width: 480px;" placeholder="必填项!"></el-input>
                </el-form-item>
                <el-form-item label="脉搏(次/min)">
                    <el-input type="number" v-model.number="files.pulse" style="width: 480px;" placeholder="必填项!"></el-input>
                </el-form-item>
            </el-form>
        </el-form-item>

        <el-form-item label="低压(mmHg)">
            <el-form :inline="true" label-width="180px">
                <el-form-item>
                    <el-input type="number" v-model.number="files.min_pressure" style="width: 480px;" placeholder="必填项!"></el-input>
                </el-form-item>
                <el-form-item label="高压(mmHg)">
                    <el-input type="number" v-model.number="files.high_pressure" style="width: 480px;" placeholder="必填项!"></el-input>
                </el-form-item>
            </el-form>
        </el-form-item>

        <el-form-item label="心电图">
            <el-form :inline="true" label-width="180px">
                <el-form-item>
                    <el-input v-model="files.electrocardiogram" style="width: 480px;" placeholder="必填项!"></el-input>
                </el-form-item>
                <el-form-item label="接种新冠疫苗的次数">
                    <el-input type="number" v-model.number="files.vaccination" style="width: 480px;" placeholder="必填项!"></el-input>
                </el-form-item>
            </el-form>
        </el-form-item>


        <el-form-item label="体温">
            <el-input type="number" v-model.number="files.temperature" style="width: 1150px;" placeholder="必填项!"></el-input>
        </el-form-item>

        <el-form-item label="建档员工">
            <el-form v-model="employeeInfo" :inline="true" label-width="180px">
                <el-form-item>
                    <el-input v-model="employeeInfo.username" style="width: 480px;" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="employeeInfo.phone" style="width: 480px;" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
        </el-form-item>

        <el-form-item label="地址">
            <el-form v-model="employeeInfo" :inline="true" label-width="180px">
                <el-form-item>
                    <el-input v-model="employeeInfo.address" style="width: 480px;" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="上属管理员">
                    <el-select v-model="employeeInfo.admin_id" style="width: 480px;">
                        <el-option :label="item.username" :value="item.id" v-for="item in adminList" :key="item.id" :disabled="true"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="restSubmit">重 置</el-button>
        </el-form-item>

        <el-form-item >
        </el-form-item>
    </el-form>
</template>

<script>
    import myAxios from '@/tools/myAxios';
    import Qs from 'qs';
    export default {
        name:'StatusEmployeeAddFiles',
        data() {
            return {
                // 老人数据
                olderInfo:{
                    phone:'',
                    address:'',
                    clan:'',
                    clan_phone:''
                },

                // 所有的老人信息
                olderList:[],

                // 档案数据
                files: {
                    older_id:null,

                    temperature: '',
                    height: '',
                    weight: '',
                    respiratory_rate: '',
                    pulse: '',
                    min_pressure: '',
                    high_pressure: '',
                    electrocardiogram: '',
                    vaccination:'',

                    employee_id:null          // 建档人
                },
                // 员工数据
                employeeInfo:{
                    username:'',
                    phone:'',
                    address:'',
                    admin_id:null
                },

                // 所有管理员的数据
                adminList:[]
            }
        },
        watch:{
            // 监视老人下拉框，并实时更新老人信息
            'files.older_id':{
                handler(newValue){
                    this.olderList.forEach((item)=>{
                        if(item.id === newValue){
                            this.olderInfo.phone = item.phone;
                            this.olderInfo.address = item.address;
                            this.olderInfo.clan = item.clan;
                            this.olderInfo.clan_phone = item.clan_phone;
                        }
                    })
                }
            }
        },
        methods:{
             // 重置按钮
             restSubmit(){
                this.olderInfo = {
                    phone:'',
                    address:'',
                    clan:'',
                    clan_phone:''
                },
                this.files = {
                    older_id:null,

                    temperature: '',
                    height: '',
                    weight: '',
                    respiratory_rate: '',
                    pulse: '',
                    min_pressure: '',
                    high_pressure: '',
                    electrocardiogram: '',
                    vaccination:'',

                    employee_id:null          // 建档人
                },
                // 提示一下
                this.$message({
                    message: '重置成功!',
                    type: 'success'
                });
            },
            // 添加老人健康档案确认按钮
            onSubmit() { 
                if(
                    this.files.older_id === null        ||
                    this.files.temperature === ''       ||
                    this.files.height === ''            ||
                    this.files.weight === ''            ||
                    this.files.respiratory_rate === ''  ||
                    this.files.pulse === ''             ||
                    this.files.min_pressure === ''      ||
                    this.files.high_pressure === ''     ||
                    this.files.electrocardiogram === '' ||
                    this.files.vaccination === ''       ||
                    this.files.employee_id === null      
                ){
                    this.$message({
                            message: '请输入数据!',
                            type: 'warning'
                    });
                    return;
                }
                myAxios(
                    'http://localhost:8088/older/addolderhealthfile',
                    'post',
                    Qs.stringify(this.files),
                    (data)=>{
                        // 提示一下
                        this.$message({
                            message: '创建成功!',
                            type: 'success'
                        });
                        this.restSubmit();
                    }
                )
            }
        },
        mounted(){
            // 填充员工数据
            const user = JSON.parse(sessionStorage.getItem('user'));
            this.employeeInfo.username = user.username;
            this.employeeInfo.phone = user.phone;
            this.employeeInfo.address = user.address;
            this.employeeInfo.admin_id = user.admin_id;

            this.files.employee_id = user.id;

            // 获取所有老人信息
            myAxios(
                'http://localhost:8088/older/getallolderdetailinfobyall',
                'get',
                null,
                (data)=>{
                    if(data.length === 0){
                        // 提示一下
                        this.$message({
                            message: '老人列表为空!',
                            type: 'warning'
                        });
                    }else{
                        this.olderList = data;
                    }
                }
            )

            // 获取所有管理员信息
            myAxios(
                'http://localhost:8088/admin/getalladmin',
                'get',
                null,
                (data)=>{
                    if(data.length === 0){
                        // 提示一下
                        this.$message({
                            message: '管理员列表为空!',
                            type: 'warning'
                        });
                    }else{
                        this.adminList = data;
                    }
                }
            )
        }
    }
</script>

<style lang="less" scoped>
</style>